<template>
    <div class="userManagement">
        <head-search>
            <el-button @click="addUser">新增用户</el-button>
        </head-search>
        <el-table :height="tableHeight" :data="tableData">
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="80"
            />
            <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="180"
            />
            <el-table-column
                prop="userName"
                label="用户名"
                align="center"
                sortable
                width="180"
            />
            <el-table-column
                prop="bornDate"
                label="出生日期"
                align="center"
                sortable
                width="180"
            />
            <el-table-column
                prop="gender"
                label="性别"
                align="center"
                width="80"
            >
                <template #default="scope">
                    <svg-icon v-if="scope.row.gender==='1'" name="gender-boy" />
                    <svg-icon v-else name="gender-girl" />
                </template>
            </el-table-column>
            <el-table-column
                prop="email"
                align="center"
                label="邮箱"
            />
            <el-table-column
                prop="phoneNum"
                align="center"
                label="手机号"
            />
            <el-table-column
                prop="roleName"
                align="center"
                label="角色"
            />
            <el-table-column
                label="操作"
                align="center"
            >
                <template #default="scope">
                    <el-button size="small" plain @click="userDetail(scope.row)">
                        详情
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        plain
                        @click="editUserInfo(scope.row)"
                    >
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <foot-page :page-info="page" @changePage="pageChange" />
        <el-dialog
            v-model="modal.show"
            :title="modal.title"
            width="30%"
        >
            <span>
                <el-form
                    v-if="modal.type==='userEdit'" ref="formInline" :label-width="70" :model="userInfo"
                    :rules="userInfoRule"
                >
                    <el-form-item label="用户名">
                        <el-input v-model="userInfo.userName" :disabled="isEdit" placeholder="用户名" />
                    </el-form-item>
                    <div v-show="!isEdit">
                        <el-form-item label="密码">
                            <el-input v-model="userInfo.password" type="password" placeholder="密码" />
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input v-model="surePassword" type="password" placeholder="确认密码" />
                        </el-form-item>
                    </div>
                    <el-form-item label="姓名">
                        <el-input v-model="userInfo.name" placeholder="姓名" />
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="userInfo.phoneNum" />
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="userInfo.email" />
                    </el-form-item>
                    <el-form-item label="生日">
                        <el-date-picker
                            v-model="userInfo.bornDate" value-format="YYYY-MM-DD" transfer type="date"
                            placeholder="请选择出生日期"
                        />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="userInfo.gender">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </span>
            <div class="dialog-footer">
                <el-button @click="modal.show = false">取 消</el-button>
                <el-button type="primary" @click="subForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import FootPage from '@/components/FootPage/index.vue'
import HeadSearch from '@/components/HeadSearch/index.vue'
import { pageUserList, saveUser } from '@/api/sys/sys-user'

export default {
    name: 'UserManagement',
    components: { HeadSearch, FootPage },
    data() {
        return {
            modal: {
                show: false,
                title: '',
                type: ''
            },
            page: {
                total: 0,
                current: 1,
                size: 10
            },
            tableData: [],
            surePassword: '',
            isEdit: false,
            searchName: '',
            userInfo: {
                userName: '',
                password: '',
                gender: '1',
                name: '',
                phoneNum: '',
                email: '',
                bornDate: '',
                id: '',
                roleList: []
            },
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            userInfoRule: {}
        }
    },
    computed: {
        tableHeight() {
            return window.innerHeight - 275
        }
    },
    created() {
        this.getUserList()
    },
    methods: {
        addUser() {
            this.isEdit = false
            this.modal.show = true
            this.modal.title = '新增用户'
            this.modal.type = 'userEdit'
        },
        subForm() {
            saveUser(this.userInfo).then(res => {
                if (res.code === '0') {
                    this.$message.success('保存成功')
                    this.getUserList()
                    this.modal.show = false
                }
            })

        },

        pageChange(index) {
            this.page.current = index
            this.getUserList()
        },

        userDetail(obj) {
            console.log(obj)
        },

        editUserInfo(obj) {
            this.userInfo = Object.assign(this.userInfo, obj)
            this.isEdit = true
            this.modal.show = true
            this.modal.title = '编辑用户'
            this.modal.type = 'userEdit'
        },

        getUserList() {
            pageUserList({
                page: this.page
            }).then(res => {
                if (res.code === '0') {
                    this.tableData = res.data.records
                    this.page.total = parseInt(res.data.total)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.userManagement {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 20px;
    background-color: white;
    .table-content {
        padding: 10px;
        text-align: center;
    }
}
</style>
